<!doctype html>
<html lang="ch-ZN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--	<link rel="stylesheet" href="style.css">-->
    <title>柯基</title>
    <style>
        * {
            box-sizing: border-box;
        }

        *::before,
        *::after {
            box-sizing: border-box;
        }

        #buttons {
            position: fixed;
            right: 0;
            top: 0;
            z-index: 10;
            display: flex;
            flex-direction: column;
            margin-top: 10px;
            margin-right: 10px;
        }

        #buttons>button {
            margin-bottom: 10px;
            padding: 4px 8px;
        }

        #demo2 {
            display: none;
        }

        #demo {
            position: fixed;
            height: 50vh;
            top: 0;
            left: 0;
            width: 100%;
            border: 1px solid #9a85c5;
            overflow-y: auto;
        }

        #demo::-webkit-scrollbar {
            display: none;
        }

        #html {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #9a85c5;
        }

        /*把部分style放过来*/
    </style>
    <style>
        /*首先准备一个div*/
        .dog {
            position: absolute;
            top: 52%;
            width: 50vmin;
            height: 37vmin;
            z-index: 0;
        }

        .face {
            border-top-right-radius: 45% 50%;
            border-top-left-radius: 35% 50%;
            border-bottom-left-radius: 35% 21%;
            z-index: 6;
            height: 40%;
            width: 42%;
            position: absolute;
            top: -13%;
            left: -3%;
        }

        .face:after,
        .face:before {
            content: '';
            position: absolute;

        }

        .face:after {
            width: 27%;
            left: 7%;
            height: 23%;
            border-top-right-radius: 100% 100%;
            border-bottom-left-radius: 49% 100%;
            transform: rotate(-64deg);
            top: -1%;
            border-top-left-radius: 0% 20%;
            border-bottom-right-radius: 52% 0%;
        }

        .face:before {
            width: 55%;
            left: 42%;
            top: 0%;
            height: 35%;
            border-radius: 23% 7% 16% 12%;
            transform: rotate(0deg) scaleX(-1);
        }

        .eye {
            width: 6%;
            height: 6%;
            position: absolute;
            border-radius: 100%;
            top: 24%;
            z-index: 6;
        }

        @keyframes dog-eye {

            from,
            to {
                animation-timing-function: step-end;
                opacity: 1;
            }

            50%,
            55% {
                animation-timing-function: step-start;
                opacity: 0;
            }
        }

        .mouth {
            background-color: transparent;
            width: 44%;
            border-width: 0.7vmin;
            z-index: 6;
            position: absolute;
            bottom: 35%;
            left: 14%;
            border-top-color: transparent;
            border-bottom-left-radius: 72% 100%;
            border-bottom-right-radius: 77% 100%;
            border-right-color: transparent;
            border-top-right-radius: 50%;
            border-left-color: transparent;
            transform: rotate(-41deg);
        }

        .ear {
            position: absolute;
        }

        .ear--left {
            top: -40%;
            left: 3%;
            height: 47%;
            width: 19%;
            z-index: 1;
            border-top-left-radius: 68% 100%;
            border-top-right-radius: 100% 100%;
            transform-origin: bottom center;

            animation-fill-mode: both;
        }

        @keyframes left-ear {
            from {
                transform: rotate(-26deg);
            }

            25% {
                transform: rotate(-35deg);
            }

            50% {
                transform: rotate(-26deg);
            }

            to {
                transform: rotate(-40deg);
            }
        }

        .ear--right {
            top: -39%;
            left: 19%;
            height: 38%;
            width: 18%;
            z-index: 1;
            border-top-left-radius: 56% 100%;
            border-top-right-radius: 100% 100%;
            transform-origin: bottom center;
            border-bottom-right-radius: 14% 38%;

            animation-fill-mode: both;
        }

        @keyframes right-ear {
            from {
                transform: rotate(-331deg);
            }

            25% {
                transform: rotate(-320deg);
            }

            50% {
                transform: rotate(-331deg);
            }

            to {
                transform: rotate(-320deg);
            }
        }

        .nose {
            position: absolute;
            width: 24%;
            height: 24%;
            z-index: 7;
            border-bottom-left-radius: 50% 88%;
            border-top-left-radius: 11% 43%;
            transform: rotate(12deg);
        }

        .nose:after {
            content: '';
            position: absolute;
            width: 50%;
            height: 55%;
            border-radius: 100%;
            left: -7%;
            top: -18%;
        }

        /*爱心*/
        .heart {
            position: absolute;
            width: 6%;
            height: 7%;
            border-bottom-right-radius: 23%;
            opacity: 0;
            animation-fill-mode: both;
        }

        @keyframes heart-beat {
            0% {
                transform: scale(0.75) rotate(35deg);
                opacity: 1;
            }

            5%,
            15%,
            25% {
                transform: scale(1) rotate(35deg);
            }

            10%,
            20% {
                transform: scale(0.75) rotate(35deg);
            }

            70% {
                opacity: 1;
            }

            100% {
                transform: rotate(35deg) translateY(-10px) translateX(-10px);
                opacity: 0;
            }
        }

        .heart--1 {
            top: -25%;
            left: 15%;
            animation: heart-beat 2s ease-out infinite 1.5s;
        }

        .heart--2 {
            top: -36%;
            left: 7%;
            animation: heart-beat 2s ease-out infinite 1s;
        }

        .heart--3 {
            top: -48%;
            left: 14%;
            animation: heart-beat 2s ease-out infinite 0.5s;
        }

        .heart--4 {
            top: -53%;
            left: -3%;
            animation: heart-beat 2s ease-out infinite;
        }

        .heart:before,
        .heart:after {
            position: absolute;
            width: 100%;
            height: 100%;
            content: '';
            border-radius: 50%;
            background-color: #e64356;
        }

        .heart:after {
            bottom: 0px;
            left: -53%;
        }

        .heart:before {
            top: -53%;
            right: 0px;
            transform: rotate(45deg);
        }

        .body {
            position: absolute;
            width: 100%;
            height: 50%;
            border-top-right-radius: 17% 40%;
            border-top-left-radius: 25%;
            border-bottom-right-radius: 5% 13%;
            border-bottom-left-radius: 30% 40%;
            z-index: 3;
        }

        .cheast {
            position: absolute;
            width: 45%;
            height: 100%;
            border-top-right-radius: 17% 40%;
            border-top-left-radius: 25%;
            border-bottom-right-radius: 40% 40%;
            border-bottom-left-radius: 40% 40%;
            z-index: 4;
        }

        .cheast:after,
        .cheast:before {
            position: absolute;
            content: '';
            width: 7%;
            height: 55%;
            border-radius: 39%;
        }

        .cheast:after {
            top: 36%;
            left: 3%;
            transform: rotate(-1deg);
        }

        .cheast:before {
            top: 19%;
            left: -4%;
        }

        .head {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 4;
            animation: dog-head 1s ease-out infinite;
            animation-fill-mode: both;
            animation-direction: alternate;
        }

        @keyframes dog-head {
            to {
                transform: translateX(-3px) rotate(3deg);
            }
        }


        .tail {
            position: absolute;
            top: -14%;
            left: 92%;
            width: 10%;
            height: 45%;
            border-top-right-radius: 30% 30%;
            border-top-left-radius: 40% 30%;
            border-bottom-right-radius: 30% 40%;
            border-bottom-left-radius: 40% 40%;
            z-index: 2;
            transform: rotate(20deg);
        }

        @keyframes dog-tail {

            from,
            to {
                transform: rotate(10deg);
            }

            50%,
            60% {
                transform: rotate(70deg) translateX(10px) translateY(2px);
            }
        }

        .tail:before {
            position: absolute;
            content: '';
            top: -8%;
            left: -7%;
            width: 100%;
            height: 50%;
            border-radius: 50%;
            animation: dog-tail-before 160ms ease-out infinite;
        }

        @keyframes dog-tail-before {

            from,
            to {
                transform: translateX(0);
            }

            50% {
                transform: translateX(3px);
            }
        }

        .legs {
            position: absolute;
            top: 97%;
            left: 0;
            width: 100%;
            height: 30%;
            z-index: 2;
            animation: dog-legs 1s ease-out infinite 1.5s;
            animation-fill-mode: both;
            animation-direction: alternate;
        }

        @keyframes dog-legs {
            from {
                transform: translateY(-1px);
            }

            to {
                transform: translateY(0px);
            }
        }

        .legs__front:after,
        .legs__back:after {
            content: '';
            position: absolute;
            top: 50%;
            width: 100%;
            height: 49%;
            border-bottom-right-radius: 100%;
            border-bottom-left-radius: 100%;
        }



        .legs__front,
        .legs__back {
            height: 100%;
            position: absolute;
            border-bottom-right-radius: 100%;
            border-bottom-left-radius: 100%;
        }

        /*最后加点爱心*/
        .heart {
            background-color: #e64356;
        }
    </style>
</head>

<body>
    <div id="demo"></div>
    <style id="demo2"></style>

    <div id="buttons">
        <button id="btnPause">暂停</button>
        <button id="btnPlay">播放</button>
        <button id="btnSlow">慢速</button>
        <button id="btnNormal">中速</button>
        <button id="btnFast">快速</button>
    </div>

    <div id="html">
        <div class="dog">
            <div class="heart heart--1"></div>
            <div class="heart heart--2"></div>
            <div class="heart heart--3"></div>
            <div class="heart heart--4"></div>
            <div class="head">
                <div class="ear ear--left"></div>
                <div class="ear ear--right"></div>
                <div class="nose"></div>
                <div class="face">
                    <div class="eye eye--left"></div>
                    <div class="eye eye--right"></div>
                    <div class="mouth"></div>
                </div>
            </div>
            <div class="body">
                <div class="cheast"></div>
                <div class="back"></div>
                <div class="legs corgiLegs">
                    <div class="legs__front legs__front--left"></div>
                    <div class="legs__front legs__front--right"></div>
                    <div class="legs__back legs__back--left"></div>
                    <div class="legs__back legs__back--right"></div>
                </div>
                <div class="tail"></div>
            </div>
        </div>
    </div>

    <script src="main.js"></script>
</body>

</html>